<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .logo{
            margin-left: 150px;
        }
        .container{
            background-color: red;
            height: 475px;
            background-image: url("image/banner.png");
            position: relative;
        }
        .input{
            position: absolute;
            top: 30px;
            left: 600px;
            background-color: white;
            width: 300px;
            padding: 20px;
            box-sizing: border-box;
        }
        .huiyuan{
            margin-right: 100px;
            color: gray;
        }
        .input-box {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            padding: 5px 10px;
            margin-bottom: 10px;
            background-color: #fff;
        }
        .icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        .form-input {
            border: none;
            outline: none;
            flex: 1;
        }
        .pass{
            color: gray;
            text-decoration: none;
            font-size: 10px;
        }
        label{  color: gray;
            font-size: 10px;
            margin-right: 110px;
        }
        button{
            background-color: red;
            color: white;
            margin-left: 5px;
            width: 250px;
            height: 25px;
            border: 0;
        }
        .a1{
            text-align: center;
            color: gray;
        }
        .a2{
            text-align: center;
            color: gray;
        }


    </style>
</head>
<body>
<img class="logo" src="image/logo.png">
<div class="container">
    <div class="input">
        <span class="huiyuan">京东会员</span>
        <span style="color: red ;font-size: 12px" ><img src="image/icon5.jpg" style="width: 12px">立即注册</span>

        <!-- 用户名框 -->
        <div class="input-box">
            <img src="image/icon1.jpg" class="icon">
            <input type="text" placeholder="邮箱/用户名/已验证手机" class="form-input">
        </div>

        <!-- 密码框 -->
        <div class="input-box">
            <img src="image/icon2.jpg" class="icon">
            <input type="password" placeholder="请输入密码" class="form-input">
        </div>
        <div class="a">
            <label>
                <input type="checkbox" class="autoLogin" style="width: 10px">
                自动登录
            </label>
            <a  class="pass" href="#">忘记密码?</a>
        </div>
        <button>登录</button>
    </div>
</div>
 <p class="a1">关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务| 手机京东| 友情链接| 销售联盟| 京东社区| 京东公益| English Site</p>
<p class="a2">Copyright?2004-2017 京东JD.com 版权所有</p>
</body>
</html>
